<template>
  <div class="receipt-container">
    <div class="top">
      <div class="left">
        <el-input placeholder="搜尋收據編號/付款方" suffix-icon="el-icon-search"></el-input>
        <el-select style="margin: 0 15px">
          <el-option></el-option>
        </el-select>
        <el-date-picker></el-date-picker>
        <div class="btn-list">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
      <div class="right">
        <el-button>
          <svg-icon icon-class="import"></svg-icon>
          導入
        </el-button>
        <el-button>
          <svg-icon icon-class="export"></svg-icon>
          導出
        </el-button>
        <el-button type="primary" @click.native="addReceipt">
          <svg-icon icon-class="staff-add"></svg-icon>
          新增收據
        </el-button>
      </div>
    </div>
    <div class="table-wrap br-20">
      <h4>收據列表</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="收據編號">
          <template>
            <div>
              <div class="text-1">QUOTE-2024-001</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="付款方">
          <template>
            <div class="text-1">XXXX科技公司</div>
          </template>
        </el-table-column>
        <el-table-column label="全部">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="付款方式">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="日期">
          <template>
            <span>2025-08-06</span>
          </template>
        </el-table-column>
        <el-table-column label="狀態">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="receiptDetailVisible = true">檢視</el-button>
            <el-button type="text" size="small" @click.native="editReceipt">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog :title="editReceiptTitle" class="add-receipt-dialog" :visible.sync="addReceiptVisible" width="680px" top="2%">
      <el-form :model="addReceiptFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="收據編號">
              <el-input v-model="addReceiptFormData.name" autocomplete="off" placeholder="請輸入收據編號"></el-input>
            </el-form-item>
            <el-form-item label="付款方">
              <el-input v-model="addReceiptFormData.name" autocomplete="off" placeholder="請輸入付款方"></el-input>
            </el-form-item>
            <el-form-item label="金額">
              <el-input v-model="addReceiptFormData.name" autocomplete="off" placeholder="請輸入金額"></el-input>
            </el-form-item>
            <el-form-item label="付款方式">
              <el-input v-model="addReceiptFormData.name" autocomplete="off" placeholder="請輸入付款方式"></el-input>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker v-model="addReceiptFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="status-info">
          <h5>狀態與關聯資訊</h5>
          <div class="status">
            <el-form-item label="狀態">
              <el-select v-model="addReceiptFormData.name" placeholder="請選擇狀態">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="關聯業務">
              <el-select v-model="addReceiptFormData.name" placeholder="請選擇關聯業務">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="detail-info">
          <h5>明細</h5>
          <div class="detail">
            <el-table :data="detailData">
              <el-table-column label="收款內容">
                <template>
                  <el-input size="small" placeholder="收款內容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="單位">
                <template>
                  <el-input size="small" placeholder="單位"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="數量">
                <template>
                  <el-input size="small" placeholder="數量"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="單價">
                <template>
                  <el-input size="small" placeholder="單價"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="稅率">
                <template>
                  <el-input size="small" placeholder="稅率"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="金額">
                <template>
                  <el-input size="small" placeholder="金額"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template>
                  <svg-icon style="font-size: 18px; cursor: pointer" icon-class="delete"></svg-icon>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin: 14px 0 20px 0">
            <svg-icon icon-class="add"></svg-icon>
            <el-button type="text">添加明細</el-button>
          </div>
        </div>
        <div class="contact-info">
          <h5>附件上傳</h5>
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
            <svg-icon v-else class="avatar-uploader-icon" icon-class="upload"></svg-icon>
          </el-upload>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addReceiptVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddReceipt">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog class="receipt-detail-dialog" title="收據詳情" width="680px" :visible.sync="receiptDetailVisible">
      <div class="detail br-15">
        <div class="detail-item">
          <span>收據編號:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>付款方:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>金額:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>付款方式:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>日期:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>活躍:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>業務關聯:</span>
          <span></span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="receiptDetailVisible = false">關閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'receipt-management',
  data() {
    return {
      tableData: [{}],
      receiptDetailVisible: false,
      addReceiptVisible: false,
      editReceiptTitle: '新增收據',
      addReceiptFormData: {},
      detailData: [],
      imageUrl: ''
    }
  },
  methods: {
    addReceipt() {
      this.addReceiptVisible = true
      this.editReceiptTitle = '新增收據'
    },
    editReceipt() {
      this.addReceiptVisible = true
      this.editReceiptTitle = '編輯收據'
    },
    submitAddReceipt() {}
  }
}
</script>

<style scoped lang="less">
.receipt-container {
  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .left {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-input {
        width: 232px;
      }
      .el-select {
        width: 168px;
      }
      .el-date-picker {
        width: 172px;
      }
      .btn-list {
        margin-left: 15px;
      }
    }
  }
  .table-wrap {
    background: #fff;
    padding: 25px 30px;
    h4 {
      font-size: 18px;
      line-height: 25px;
      margin: 0 0 25px 0;
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px dashed #3c58fc;
    .svg-icon {
      font-size: 100px;
    }
  }
  .receipt-detail-dialog {
    .detail {
      background: rgba(60, 88, 252, 0.05);
      padding: 24px 26px;
      &-item {
        display: flex;
        justify-content: flex-start;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 23px;
      }
    }
  }
}
</style>
